<template>
  <div>
    <el-dialog
      title="配置角色"
      :visible.sync="visibleDialog"
      width="600"
    >
      <el-tree
        :data="permissionList"
        show-checkbox
        node-key="id"
        check-strictly
        default-expand-all
        :props="defaultProps"
        ref="tree"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submitPermission">确 定</el-button>
      </span>
    </el-dialog>
    <!-- :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps" -->
  </div>
</template>

<script>
import {
  getPermissionList,
  getPermission,
  distributePermission,
} from "../../../api/role";
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    getRoleList: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      permissionList: [],
      defaultProps: {
        children: "children",
        label: "permissionName",
      },
      permissionIds: [],
      visibleDialog: false
    };
  },
  watch: {
    id: {
      handler: function (newValue) {
        if (newValue) {
          this.getPermissions();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    async getPermissionLists() {
      let res = await getPermissionList();
      // console.log(res);
      this.permissionList = res;
    },
    async getPermissions() {
      let res = await getPermission(this.id);
      // this.permissionIds = res
      this.$refs["tree"].setCheckedKeys(res);
    },
    async submitPermission() {
      const treeKeys = this.$refs["tree"].getCheckedKeys();
      let res = await distributePermission(this.id, treeKeys);
      this.$message.success("用户权限更新成功");
      this.close();
      this.getRoleList();
    },
    // 打开
    open() {
        this.visibleDialog = true
        this.getPermissionLists();
    },
    // 关闭
    close() {
        this.visibleDialog = false
    },
  },
};
</script>

<style scoped >
</style>
